<!--上传文件-->
<template>
  <el-upload
    v-model="value"
    v-bind="$attrs"
    :id="'c' + formItemMeta.columnId"
    :name="'c' + formItemMeta.columnId"
    :accept="myAccept"
    :action="action"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-change="myChange"
    :before-remove="beforeRemove"
    :on-exceed="handleExceed"
    :file-list="fileList"
  >
    <el-button type="primary">Click to upload</el-button>
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div>
    </template>
    <video width="320" height="240" id="vv" controls>
      您的浏览器不支持Video标签。
    </video>
  </el-upload>{{myvideo}}
</template>

<script >
  import { defineComponent, ref, reactive, computed } from 'vue'
  import { ElMessageBox, ElMessage } from 'element-plus'
  // import { ElUpload, ElButton, ElMessage, ElMessageBox } from 'element-plus'
  // 引入组件需要的属性、控制类
  import { itemProps, itemController } from '../map'

  export default defineComponent({
    name: 'nf-el-form-item-upload-video',
    inheritAttrs: false,
    components: {
      // ElUpload, ElButton
    },
    props: {
      ...itemProps, // 基础属性
      accept: {
        type: [String, Array],
        default: ''
      },
      modelValue: [String]
    },
    emits: ['update:modelValue'],
    setup (props, context) {
      // console.log('props-text', props)
      // console.log('props-ctx', context)
      const {
        value,
        run,
        clear,
        myinput
      } = itemController(props, context.emit)

      // 转换允许上传的类型
      const myAccept = computed(() => {
        if (Array.isArray(props.accept)) {
          return props.accept.join(',')
        } else {
          return props.accept
        }
      })

      const fileList = reactive([
        {
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
        },
        {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
        },
      ])

      const myvideo = ref('')

      const myChange = (file, fileList) => {
        console.log(file, fileList)
        const url = window.URL.createObjectURL(file.raw)
        myvideo.value = url
        document.getElementById('vv').src = url
      }

      const handleRemove = (file, fileList) => {
        console.log(file, fileList)
      }
      const beforeRemove = (file, fileList) => {
        return ElMessageBox.confirm(`真的要删除 ${file.name} 文件吗？`)
      }
      
      const handlePreview = (file) => {
        console.log(file)
        myvideo.value = file
      }
      
      const handleExceed = (files, fileList) => {
        ElMessage.warning(
          `The limit is 3, you selected ${files.length} files this time, add up to ${
            files.length + fileList.length
          } totally`
        )
      }
      
      return {
        fileList,
        handleRemove,
        handlePreview,
        handleExceed,
        myChange,
        beforeRemove,
        value,
        myAccept, // 允许上传的文件类型
        myvideo, // 视频
        run,
        clear,
        myinput
      }
    }
  })
</script>
